<template>
  <el-dialog :title=title
             v-if="open"
             :visible.sync="open"
             :modal= false
             width="80%"
             center
  >
  <div class="app-container">
    <el-tabs type="border-card">
      <el-tab-pane  :key="1" label="计划、物料信息">
        <div style="font-size: 20px;">计划信息</div>
        <!--横线组件纯纯为了页面好看-->
        <el-divider></el-divider>
        <el-form ref="form" :model="form" :rules="rules" label-width="150px">
          <el-row>
            <el-col :span="10">
              <el-form-item label="计划编号" prop="planNumber">
                <el-input v-model="form.planNumber" readonly/>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="计划名称" prop="planName">
                <el-input v-model="form.planName"  readonly />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="开始日期" prop="planDate">
                <el-date-picker clearable
                                v-model="form.planDate"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="请选择计划开始日期" style="width: 100%" readonly>
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="截止日期" prop="materialDeadline">
                <el-date-picker clearable
                                v-model="form.materialDeadline"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="请选择计划截止日期" style="width: 100%" readonly>
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <el-form-item label="备注" prop="remarks">
                <el-input v-model="form.remarks" type="textarea" placeholder="请输入备注"  style="width: 100%" maxlength="250" readonly/>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
        <!--横线组件纯纯为了页面好看-->
        <el-divider></el-divider>
        <el-row style="margin-bottom: 20px;">
          <el-col :span="1.5">
            <div style="font-size: 20px; margin-top: 5px">采购物料</div>
          </el-col>
        </el-row>
        <el-table border :data="addGoodsList" >
          <el-table-column label="物料编号" align="center" prop="itemCode"/>
          <el-table-column label="物料名称" align="center" prop="itemName"/>
          <el-table-column label="规格型号" align="center" prop="specification"/>
          <el-table-column label="单位" align="center" prop="unitOfMeasure"/>
          <el-table-column label="分类" align="center" prop="itemTypeName"/>
          <!--      <el-table-column label="采购单价" align="center" prop="estimatedUnitPrice"/>-->
          <el-table-column label="采购数量" align="center" prop="quantity"/>
          <el-table-column label="已采购数量" align="center" prop="purchasedQuantity"/>
          <!--      <el-table-column label="采购总价" align="center" prop="total"/>-->
        </el-table>
      </el-tab-pane>
      <el-tab-pane  :key="2" label="审批流程">
        <el-timeline id="approveTimeLine">
          <el-timeline-item
            v-for="item in approveFlow"
            :key="item.businessCode"
            :timestamp="item.createTimeLog"
            placement="top"
            :icon="item.stepNickNameLog?'el-icon-success':''"
            :color="item.stepNickNameLog?'#13ce66':''"
          >
            <el-card>
              <h3>{{ item.stepNickNameLog }} <b>{{item.stepName}} {{item.statusLog?item.statusLog>=1?'同意':item.statusLog==0?'':'驳回':''}}</b></h3>
              <p style="padding-top: 20px;">审批意见：{{ item.remark }}</p>
            </el-card>
            </el-timeline-item>
        </el-timeline>
      </el-tab-pane>
      <el-tab-pane  :key="3" label="审批信息">
        <el-form ref="approveForm" :model="approveForm" :rules="approveRules" label-width="150px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="审批意见" prop="remark">
                <el-input type="textarea" placeholder="请输入审批意见" v-model="approveForm.remark"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item>
                <el-button type="primary" @click="submitForm(true)">同 意</el-button>
                <el-button type="danger" @click="submitForm(false)">驳 回</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer" class="dialog-footer" style="text-align:center;margin-top: 20px;">
      <el-button type="info" @click="cancel">关 闭</el-button>
    </div>
  </div>
  </el-dialog>
</template>

<script>
import {confirmPlan,getPlan,approveFlow} from "@/api/mes/cg/plan";


export default {
  name: "approveView",
  dicts: ['erp_payment_type'],
  data() {
    return {
      open:false,
      title:null,
      approveFlow:[{}],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 添加的商品信息表格数据
      addGoodsList: [],
      // 表单参数
      form: {},
      approveForm:{},
      // 表单校验
      rules: {
      },
      approveRules: {
        remark: [
          { required: true, message: "请输入审批意见", trigger: "blur" },
          { min: 1, max: 200, message: "长度在 1 到 200 个字符", trigger: "blur" }
        ]
      }
    };
  },
  created() {
   /* this.getList();
    //查询商品表方法
    this.getGoodsList();
    //查询供应商列表方法
    this.getSupplierlist();*/
  },
  methods: {
    init(id){
      getPlan(id).then(response => {
        this.form = response.data;
        this.addGoodsList=response.data.cgPurchasePlanDetails;
        approveFlow(this.form.planNumber).then(re => {
          this.approveFlow = re.data;
        })
      });
    },
    //商品小计
   /* getSummaries(param) {
      const {columns, data} = param;
      const sums = []; //声明变量
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "小计";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (
          column.property === "total"
        ) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
        } else {
          sums[index] = '';
        }
      });
      this.form.estimatedCost=sums[7];
      return sums;
    },*/
    // 取消按钮
    cancel() {
      this.open = false;
    },
    /** 新增提交按钮 */
    submitForm(isYes) {
      let that = this;
      let words=isYes?'通过':'驳回';
      this.$refs["approveForm"].validate(valid => {
        if (valid) {
          that.$modal.confirm(`是否确认审批${words}？`).then(function () {
            confirmPlan({
              'businessId': that.form.planId,
              'remark': that.approveForm.remark,
              'isYes': isYes
            }).then(response => {
              that.$modal.msgSuccess("采购计划审批完成");
              that.open = false;
              that.$parent.getList();
              that.cancel();
            })
          });
        }
      });
    },
  }
};
</script>

<style >
#approveTimeLine .el-timeline-item__node--normal{
  width: 18px;
  height: 18px;
  left: -4px;
}
</style>
